{% extends "base.html" %}
{% block title %}recipe{% end %}

{% block head %}
<style type="text/css">
img {width: 160px; height: 160px; display: block; }
li {float:left;}
ul {list-style: none; display: block;}
</style>
{% end %}
{% block body %}
<div class="container">
    <div class="row">
        <div class="span7">
            <h1> Headline </h1>
            <ul>
            {% for r in headline %}
            <li>
            <!-- img src="{{r.pic_url}}" -->
            <a href="/recipe/{{r.id}}">{{r.title}}</a>
            </li>
            {% end %}
            </ul>
            <div style="clear:both;"></div>

            <h1> Trend </h1>
            <ul>
            {% for r in trend %}
            <li>
            <!-- img src="{{r.pic_url}}" -->
            <a href="/recipe/{{r.id}}">{{r.title}}</a>
            </li>
            {% end %}
            </ul>
            <div style="clear:both;"></div>

            <h1> Recent </h1>
            <ul>
            {% for r in recent %}
            <li>
            <!-- img src="{{r.pic_url}}" -->
            <a href="/recipe/{{r.id}}">{{r.title}}</a>
            </li>
            {% end %}
            </ul>
        </div>
        <div class="span3">
            <a href="/recipe/create">Create</a>
        </div>
    </div>
</div>

{% end %}
